<script>
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      filterText: '',
      rootNodes: [],
      tableData: [],
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    treeClick: function (item) {
      this.fetchTableData(item.id)
    },
    fetchData: function () {
      const data = {content: {}}
      this.$axios({url:"/ems/client/energy/search/circuit/diagram/tree", data: data}).then((content) => {
        this.transformData(content.list)
        this.data = content.list
        if (content.list.length > 0) {
          this.fetchTableData(content.list[0].id)
        }
      })
    },
    fetchTableData: function (id) {
      const idSplit = id.split('_');
      const data = {content:{}}
      data.content['' + idSplit[0] +''] = idSplit[1]
      this.$axios({url:"/ems/client/energy/search/online/value", data: data}).then((content) => {
        this.tableData = content.list
      })
    },
    transformData: function (list) {
      for (let i = 0; i < list.length; i ++) {
        const child = list[i];
        child.id = 'nodeId_' + child.nodeId;
        child.label = "【配电路节点】" + child.nodeName;
        if (child.children && child.children.length > 0) {
          this.transformData(child.children)
        }
        if(child.meters) {
          for (let m = 0; m < child.meters.length; m ++) {
            const meter = child.meters[m]
            meter.id = 'meterId_' + meter.meterId
            meter.label = "【电表】" + meter.meterName
            meter.children = []
            for (let p = 0; p < meter.points.length; p ++) {
              const point = meter.points[p];
              point.id = 'pointId_' + point.pointId
              point.label = "【采集点】" + point.pointName
              point.children = []
              meter.children.push(point)
            }
            meter.points = null
            child.children.push(meter)
          }
          child.meters = null
        }
        if(child.buildings) {
          for (let m = 0; m < child.buildings.length; m ++) {
            const item = child.buildings[m]
            item.id = 'buildingId_' + item.buildingId
            item.label = "【建筑】" + item.buildingName
            child.children.push(item)
          }
          child.buildings = null
        }
        if(child.departments) {
          for (let m = 0; m < child.departments.length; m ++) {
            const item = child.departments[m]
            item.id = 'departmentId_' + item.departmentId
            item.label = "【科室】" + item.departmentName
            child.children.push(item)
          }
          child.departments = null
        }
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }
  }
};
</script>

<template>
<div>
  <el-row>
    <el-col :span="6">
      <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText">
      </el-input>

      <el-tree
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          :filter-node-method="filterNode"
          @node-click="treeClick"
          ref="tree">
      </el-tree>
    </el-col>
    <el-col :span="18">
      <el-table
          stripe
          border
          :data="tableData"
          style="width: 99%;margin-left: 1%;">
        <el-table-column  prop="meterCode"  label="仪表编号"></el-table-column>
        <el-table-column  prop="meterName"  label="仪表名称"></el-table-column>
        <el-table-column  prop="pointName"  label="采集点名称"></el-table-column>
        <el-table-column  prop="energyName"  label="能耗类型"></el-table-column>
        <el-table-column  prop="itemName"  label="分项名称"></el-table-column>
        <el-table-column  prop="gateWayName"  label="采集器名称"></el-table-column>
        <el-table-column  prop="lastUploadRealValue"  label="监测值">
          <template scope="scope">
            {{$doubleVal(scope.row.lastUploadRealValue)}}
          </template>
        </el-table-column>
        <el-table-column  prop="lastUploadTime"  label="上次采集时间"></el-table-column>
        <el-table-column  prop="stateDesc"  label="状态">
          <template slot-scope="scope"><i style="font-style: normal" :style="scope.row.state === 'Y' ? '': 'color:red;'">{{ scope.row.stateDesc }}</i></template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</div>
</template>

<style>

</style>
